<template>
    <div id="tmp1">
       <div id="cate">
           <ul v-bind="{style:'width:'+ulWidth+'px'}">
               <li @click="getimges(0)">全部</li>
               <li @click="getimges(item.id)" v-for="(item,index) in cates" :key="index">{{item.title}}</li>
           </ul>
       </div>
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img   v-lazy="item.img_url">
                        <div class="desc">
                            <h5>{{item.title}}</h5>
                            <p>{{item.zhaiyao}}</p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
    export default{
        data(){
            return{
                ulWidth:320,
                cates:[
// {"title":"家居生活","id":14},{"title":"摄影设计","id":15},{"title":"明星美女","id":16},{"title":"空间设计","id":17},{"title":"户型装饰","id":18},{"title":"广告摄影","id":19},{"title":"摄影学习","id":20},{"title":"摄影器材","id":21},{"title":"明星写真","id":22},{"title":"清纯甜美","id":23},{"title":"古典美女","id":24}
 ],
                list:[
//                    {"id":50,"title":"有气质且带可爱的美女组图","img_url":"http://182.254.146.100:8080/upload/201504/18/thumb_201504181416251481.jpg","zhaiyao":"有气质且带可爱的美女组图有气质且带可爱的美女组图有气质且带可爱的美女组图"},
//                    {"id":51,"title":"超甜美的韩国美女美图欣赏","img_url":"http://182.254.146.100:8080/upload/201504/18/thumb_201504181420529760.jpg","zhaiyao":"收集了甜素纯美女写真图1等精彩图片,同时汇集美女图片,搞笑图片,奇闻趣事,风景图片,明星写真,娱乐八卦,气质,清纯,非主流,美女,高清图片"}
                    ]

            }
        },
        created(){
            this.getcates();
            var all=0;
            this.getimges(all);
        },
        methods:{
            getcates(){
               var url=common.apidomain+'/api/getimgcategory'
               this.$http.get(url).then(function(res){
                   if(res.body.status!=0){
                       Toast(res.body.message);
                       return;
                   }
                    this.cates=res.body.message;
                   var w=62;
                   var count=res.body.message.length+1;
                   this.ulWidth = w * count ;
               })
            },
            getimges(cateid){
                cateid=cateid||0;
                var url=common.apidomain+'/api/getimages/'+cateid;
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.list=res.body.message;
                })
            }
        }
    }
</script>
<style scoped>
    #cate{
        width: 375px;
        max-width: 375px;
        overflow-x: auto;
    }
    #cate ul{
        margin: 0px;
       padding-left: 10px;
    }
    #cate li{
        list-style: none;
        display: inline-block;
        color:#0094ff;
        cursor: pointer;
        font-size: 14px;
        padding-left: 6px;
    }
    #imglist ul {
        padding-left: 0px;
    }
    #imglist li{
        list-style:none;
        position: relative ;
    }
    #imglist img{
        width:100%;
        height: 300px;
    }
    .desc{
        width: 100%;
        background-color: rgba(0,0,0,0.2);
        position: absolute;
        bottom: 2px;
        left: 0px;
    }
    #desc h5{
        color: #ffffff;
        font-weight: bold;
    }
    #desc p{
        color:#fff;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
 </style>